<template>
  <div>
    <div class="graph-box" ref="graphBox">

    </div>
  </div>
</template>

<script>
import {EventBus} from "@/EventBus";
import {$GraphApi} from "@/network/node/GraphApi";


export default {
  name: "GraphPlay",
  data() {
    return {
      baseNode: {
        id: '',
        label: '',
      },
      myChart: null,
    }
  },

  methods: {
    async drawGraph(params) {
      let res = await $GraphApi.draw(params);
      let options = res.data;
      const chartDom = this.$refs.graphBox;
      this.myChart = this.$echarts.init(chartDom);
      this.myChart.setOption(options);
      this.myChart.on("click", this.openOrFold);
    },

    openOrFold(param) {
      let option = this.myChart.getOption();
      let nodesOption = option.series[0].data;
      let linksOption = option.series[0].links;
      let data = param.data;
      let linksNodes = [];

      if (data !== null && data !== undefined) {
        if (data.flag) {
          let tempNodes = [];
          // 如果节点已经展开，将其所有的关联节点隐藏
          for (let m in linksOption) {
            // 找上下“已经显示的孤立的”层节点隐藏
            if (
                linksOption[m].target === data.name &&
                nodesOption[linksOption[m].source].category >= 0 &&
                !nodesOption[linksOption[m].source].flag
            ) {
              // 找下层
              // tempNodes.push(nodesOption[linksOption[m].source])
              linksNodes.push(linksOption[m].source);
            } else if (
                linksOption[m].source === data.name &&
                nodesOption[linksOption[m].target].category >= 0 &&
                !nodesOption[linksOption[m].target].flag
            ) {
              // 找上层
              tempNodes.push(nodesOption[linksOption[m].target])
              linksNodes.push(linksOption[m].target);
            }
          }
          // 找孤立点
          let temp = [];
          for(let i in linksOption){
            for(let j in tempNodes){
              if(linksOption[i].target === tempNodes[j].name
                  && nodesOption[linksOption[i].source].category>=0 && linksOption[i].source !== data.name
              ) {
                // console.log(linksOption[i])
                temp.push(linksOption[i].target)
              } else if (linksOption[i].source === tempNodes[j].name
                  && nodesOption[linksOption[i].target].category>=0 && linksOption[i].target !== data.name) {
                temp.push(linksOption[i].source)
              }
            }
          }
          let  uniqueTemp = [...new Set(temp)]
          let elementsSet = new Set(uniqueTemp)
          linksNodes = linksNodes.filter
          (item=>!elementsSet.has(item))

          // 将上下层节点的隐藏设置
          if (linksNodes !== null && linksNodes !== undefined) {
            for (let k in linksNodes) {
              nodesOption[linksNodes[k]].category =
                  nodesOption[linksNodes[k]].category * -1;
            }
            nodesOption[data.name].flag = false;
          }
        } else {
          // 如果节点未展开，将其所有的关联节点打开
          for (let m in linksOption) {
            // 找上下“未显示的”层节点
            if (
                linksOption[m].target === data.name &&
                nodesOption[linksOption[m].source].category < 0
            ) {
              // 找下层
              linksNodes.push(linksOption[m].source);
            } else if (
                linksOption[m].source === data.name &&
                nodesOption[linksOption[m].target].category < 0
            ) {
              // 找上层
              linksNodes.push(linksOption[m].target);
            }
          }
          // 将上下层节点的显示设置
          if (nodesOption !== null) {
            for (let k in linksNodes) {
              nodesOption[linksNodes[k]].category =
                  nodesOption[linksNodes[k]].category * -1;
            }
            nodesOption[data.name].flag = true;
          }
        }
        // option.series[0].data = linksNodes;
        this.myChart.setOption(option);
      }

    },




  },

  mounted() {
    EventBus.$on('nodeClick', (params) => {
      this.baseNode = params;
      this.drawGraph({
        baseNodeId: params.id
      });
    })
  }


}
</script>

<style scoped>
.graph-box {
  width: 100%;
  height: 600px;
  margin: 0 auto;
}
</style>